<template>
  <van-tabs v-model:active="active" swipeable sticky offset-top="45" replace @change="toggleTab">
    <van-tab v-for="item in tabList" :key="item.name" :title="item.title" :name="item.name" swipeable>
      <div class="searchContent-view" v-if="active == item.name">
        <router-view></router-view>
      </div>
    </van-tab>
    <!-- <van-tab v-for="item in tabList" :key="item.name" :title="item.title" :name="item.name">
      {{ item.title }}
    </van-tab> -->
    <!-- <van-tab></van-tab> -->
    <template #nav-right>
      <div style="width: 80px"></div>
    </template>
  </van-tabs>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'FissionFriendsH5Tabsmodule',
  setup() {
    const active = ref('')
    const router = useRouter()
    const tabList = ref([
      { title: '综合', name: 'synthesizeSearchPage' },
      { title: '视频', name: 'videoSearchPage' },
      { title: '用户', name: 'userSearchPage' },
      { title: '话题', name: 'topicSearchPage' }
    ])
    const toggleTab = (name) => {
      // console.log(name)
      router.push({ name })
    }
    return {
      tabList,
      active,
      toggleTab
    }
  }
}
</script>

<style lang="scss" scoped>
.searchContent-view {
  padding: 0 15px 0 15px;
  margin-top: 50px;
  height: 78vh;
  overflow-y: auto;
}
</style>
